<template>
  <div style="height: 240px">
    <ChartView ref="chartViewRef"></ChartView>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
const chartViewRef = ref()

const option = {
  grid: {
    containLabel: true,
  },
  legend: {
    // 图例通过name与series中的name建立对应关系
    data: [
      { name: '产量', icon: 'rect' },
      {
        name: '完成率',
        // echarts最新官方文档中不存在line这种图例，但是itemStyle却可以加上边框，所以最终变成了直线效果
        icon: 'line',
        itemStyle: {
          borderColor: 'red',
          borderWidth: 2,
        },
      },
    ],
  },
  tooltip: {
    trigger: 'axis',
  },
  /**
   * x坐标轴配置
   */
  xAxis: {
    /**
     * 坐标轴类型
     * 'value' 数值轴，适用于连续数据。
     * 'category' 类目轴，适用于离散的类目数据。
     * 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
     * 'log' 对数轴。适用于对数数据。对数轴下的堆积柱状图或堆积折线图可能带来很大的视觉误差，并且在一定情况下可能存在非预期效果，应避免使用。
     */
    type: 'category',
    /**
     * x轴数据
     */
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  /**
   * y坐标轴配置
   */
  yAxis: [
    {
      type: 'value',
      /**
       * 设置y轴的index，在单个图表实例存在多个y轴时需要设置. 设置series数据时，也需要设置该属性，从而让echarts知道数据与哪个轴对应
       */
      yAxisIndex: 0,
      /**
       * 设置坐标轴名称
       */
      name: '产量',
      /**
       * 设置坐标轴名称样式
       */
      nameTextStyle: {
        color: 'red',
      },
      axisLabel: {
        //y轴每个刻度都加单位
        formatter: '{value}个',
      },
      /**
       * 分割线
       */
      splitLine: {
        /**
         * type为 'value'时，默认是显示的，因此需要明确表示不需要显示
         */
        show: false,
      },
    },
    {
      type: 'value',
      name: '良率(%)',
      min: 0, // 最小为0
      interval: 25, // 间隔25
      axisLabel: {
        //y轴每个刻度都加单位
        formatter: '{value}%',
      },
      // 原始的y轴刻度线的最大值，就是数据值的最大值，为防止定格，将最大值在数据值的最大值基础上，再上调1.2倍
      max: function (value) {
        return parseInt(value.max * 1.2)
      },
    },
  ],
  /**
   * 图表配置
   */
  series: [
    {
      name: '产量',
      /**
       * 图表类型
       */
      type: 'bar',
      /**
       * 图表数据
       */
      data: [120, 200, 150, 80, 70, 110, 130],
    },
    {
      type: 'line',
      name: '完成率',
      data: [150, 10, 100, 90, 180, 70, 30],
      symbol: 'circle', //将小圆点改成实心 不写symbol默认空心
      yAxisIndex: 1, // 1表示以右侧Y轴为基准
      symbolSize: 10, // 圆点大小
      itemStyle: {
        normal: {
          color: 'red', //改变折圆点的颜色
          lineStyle: {
            color: 'green', //改变折线颜色
          },
        },
      },
      lineStyle: {
        color: 'brown', //折线图线条颜色
      },
      label: {
        show: true,
        color: 'orange',
        formatter: '完成率:{c}%', // {c}数据值
      },
    },
  ],
}

onMounted(() => {
  chartViewRef.value.setOption(option)
})
</script>
